<template>
  <div class="basic-title">
    <div class="title">
      {{ title }}
    </div>
    <div v-if="subTitle" class="sub-title">{{ subTitle }}</div>
  </div>
</template>

<script setup lang="ts">
interface IProps {
  title: string
  subTitle?: string
}

defineProps<IProps>()
</script>

<style scoped lang="scss">
.basic-title {
  .title {
    @apply text-[16px] text-[#161a23] font-semibold pl-[10px];

    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 53%;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      border-radius: 2px;
      background: var(--el-color-primary);
    }
  }

  .sub-title {
    @apply text-[12px] text-[#868d9d] mt-[4px];
  }
}
</style>
